<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="1000px"
    @close="close"
  >
    <div class="view flex-row align-center m-b-15">
      <div class="m-r-10">
        名称：
        <span class="orc" style="font-size: 22px !important">
          {{ nickName }}
        </span>
      </div>
      <div>
        账号：
        <span class="orc" style="font-size: 22px !important">
          {{ account }}
        </span>
      </div>
    </div>
    <el-table
      border
      :data="viewlist"
      class="m-b-15"
      :element-loading-text="elementLoadingText"
    >
      <el-table-column
        show-overflow-tooltip
        prop="curreny"
        label="币种"
      ></el-table-column>

      <el-table-column
        show-overflow-tooltip
        prop="bz"
        label="币种名称"
      ></el-table-column>

      <el-table-column
        show-overflow-tooltip
        prop="startdeposit"
        label="期初结存"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="equity"
        label="客户权益"
      ></el-table-column>

      <el-table-column
        show-overflow-tooltip
        prop="availablefunds"
        label="可用资金"
      ></el-table-column>

      <el-table-column
        show-overflow-tooltip
        prop="margins"
        label="保证金占用"
      ></el-table-column>

      <el-table-column
        show-overflow-tooltip
        prop="dsfunds"
        label="出入金"
      ></el-table-column>

      <el-table-column
        show-overflow-tooltip
        prop="fees"
        label="手续费"
      ></el-table-column>

      <el-table-column
        show-overflow-tooltip
        prop="yk"
        label="盈亏"
      ></el-table-column>

      <el-table-column
        show-overflow-tooltip
        prop="createtime"
        width="150"
        label="修改时间"
      >
        <template #default="{ row }">
          <div>
            {{ $dayjs.unix(row.createtime).format('YYYY-MM-DD HH:mm:ss') }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="业务类型" prop="fundtype">
        <el-select v-model="form.fundtype" placeholder="请选择">
          <el-option
            v-for="item in fundtypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="变动金额"
        prop="num"
        v-if="form.fundtype !== 'clear'"
      >
        <el-input v-model.trim="form.num" type="number"></el-input>
      </el-form-item>

      <el-form-item label="币种" prop="curreny">
        <el-select v-model="form.curreny" placeholder="请选择">
          <el-option
            v-for="item in usdList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button @loading="loading" type="primary" @click="save">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { deposit, dslist } from '@/api/userManagement'
  import tree from 'vue-giant-tree'
  import { getAuthList } from '@/api/ad'
  export default {
    name: 'UserManagementEdit',
    components: {
      tree,
    },
    data() {
      return {
        elementLoadingText: '正在加载...',
        account: '',
        nickName: '',
        viewlist: [],
        loading: false,
        ztreeObj: null,
        setting: {
          check: {
            enable: true, //显示复选框
            chkStyle: 'checkbox',
          },
          data: {
            simpleData: {
              enable: true,
              pIdKey: 'pid',
            },
          },
          view: {
            showIcon: true,
            dblClickExpand: true,
            selectedMulti: true, //可以多选
            showLine: true,
          },
          callback: {
            onCheck: function () {},
          },
        },
        fundtypeList: [
          { label: '入金', value: 'deposit' },
          { label: '出金', value: 'withdrawal' },
          { label: '清零', value: 'clear' },
        ],
        usdList: [
          { label: '美元', value: 'usd' },
          { label: '人民币', value: 'cnh' },
          { label: '港元', value: 'hkd' },
          { label: '欧元', value: 'eur' },
          { label: '日元', value: 'jpy' },
          { label: '英镑', value: 'gbp' },
        ],
        form: {
          num: '',
          fundtype: 'deposit',
          uid: '',
          curreny: 'usd',
        },
        rules: {
          num: [{ required: true, trigger: 'blur', message: '请输入备注' }],
          curreny: [
            { required: true, trigger: 'change', message: '请输入币种' },
          ],
          fundtype: [
            { required: true, trigger: 'change', message: '请输入业务类型' },
          ],
        },
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {},
    methods: {
      viewposit(row) {
        dslist({ uid: row.id }).then((res) => {
          let arr = []
          for (let key in res.data) {
            res.data[key]['curreny'] = key
            arr.push(res.data[key])
          }
          this.viewlist = arr
        })
      },
      showEdit(row) {
        if (!row) {
          this.title = '添加'
        } else {
          this.title = '出入金'
        }
        this.account = row.account
        this.nickName = row.nickName
        this.form = Object.assign(this.form, row)
        this.viewposit(row)
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            this.loading = true
            this.form.uid = this.form.id
            const res = await deposit(this.form)
            this.$baseMessage('操作成功!', 'success')
            this.loading = false
            this.close()
            this.$emit('fetch-data')
          } else {
            return false
          }
        })
      },
    },
  }
</script>
